<template>
  <div class="network-canvas" id="myDiagramDivParent">
    <div id="myDiagramDiv"></div>
  </div>
</template>

<script>
import go from "gojs";
import { mapGetters } from "vuex";
import bus from "../../util/bus";

let $ = go.GraphObject.make;

export default {
  data() {
    return {
      myDiagram: null,
      show: true,
      // showDiagram: true,
    };
  },
  computed: {
    ...mapGetters([
      "nodeDataArray",
      "linkDataArray",
      // ...
    ]),
  },
  mounted() {
    bus.$on("changeJson", this.onModelChanged);
    this.init();
  },

  methods: {
    init() {
      this.clearDiv();
      const myDiagram = $(go.Diagram, "myDiagramDiv", {
        initialAutoScale: go.Diagram.Uniform, // scale to show all of the contents
        ChangedSelection: this.onSelectionChanged, // view additional information
        maxSelectionCount: 1,
        "toolManager.hoverDelay": 10,
        allowDelete: false,
        allowCopy: false,
      });

      this.myDiagram = myDiagram;

      // get tooltip text from the object's data

      // define tooltips for nodes
      const tooltiptemplate = $(
        "ToolTip",
        { "Border.fill": "whitesmoke", "Border.stroke": "black" },
        $(
          go.TextBlock,
          {
            font: " 10pt Helvetica, bold Arial, sans-serif",
            wrap: go.TextBlock.WrapFit,
            width: 200,
            margin: 5,
          },
          new go.Binding("text", "", this.tooltipTextConverter)
        )
      );

      this.myDiagram.nodeTemplate = $(
        go.Node,
        "Vertical",
        {
          locationSpot: go.Spot.Center,
          deletable: false,
          toolTip: tooltiptemplate,
        },
        new go.Binding("location", "loc", go.Point.parse),
        $(
          go.Picture,

          { margin: 0, width: 60, height: 60 },
          new go.Binding("source", "pic")
        ),
        $(
          go.TextBlock,
          "Default Text",
          { margin: 5, stroke: "black", font: "bold 16px sans-serif" },
          new go.Binding("text", "text")
        )
      );

      this.myDiagram.linkTemplate = $(
        go.Link,
        {
          selectionAdorned: true,
          reshapable: true,
          corner: 5,
        },
        $(go.Shape, { stroke: "#303B45", strokeWidth: 2.5 }),
        $(
          go.TextBlock, // the "from" label
          {
            textAlign: "center",
            font: "bold 14px sans-serif",
            stroke: "#1967B3",
            segmentIndex: 0,
            segmentFraction: 0.05,
            segmentOffset: new go.Point(NaN, NaN),
            segmentOrientation: go.Link.OrientUpright,
          },
          new go.Binding("text", "fromPort")
        ),
        $(
          go.TextBlock, // the "to" label
          {
            textAlign: "center",
            font: "bold 14px sans-serif",
            // stroke: "#1967B3",
            segmentIndex: 0,
            segmentFraction: 0.75,
            segmentOffset: new go.Point(NaN, NaN),
            segmentOrientation: go.Link.OrientUpright,
          },
          new go.Binding("text", "toPort")
        ),
        $(
          go.TextBlock, // the "to" label

          {
            textAlign: "center",
            font: "bold 14px sans-serif",
            // stroke: "#1967B3",
            segmentFraction: 0.5,
            segmentOffset: new go.Point(0, -8),
            segmentOrientation: go.Link.OrientUpright,
          },
          new go.Binding("text", "loPort")
        )
      );
      myDiagram.model = new go.GraphLinksModel(
        this.nodeDataArray,
        this.linkDataArray
      );
    },
    tooltipTextConverter(router) {
      const tipList = router.portLists.map((p) => {
        return (
          this.formatString(p.name + " (" + (p.up ? "up" : "down") + ")", 20) +
          p.ip
        );
      });

      return tipList.join("\n");
    },
    change() {
      bus.$emit("changeJson");
    },
    clearDiv() {
      const parent = document.getElementById("myDiagramDivParent");
      const diagram = document.getElementById("myDiagramDiv");
      parent.removeChild(diagram);
      const div = document.createElement("div");
      div.setAttribute("id", "myDiagramDiv");
      div.setAttribute("style", "height: 85vh;");
      parent.appendChild(div);
    },
    onModelChanged() {
      this.init();
    },
    formatString(string, length) {
      if (string.length < length) {
        string += " ";
      }
      return string;
    },
    onSelectionChanged() {
      const node = this.myDiagram.selection.first();
      if (!(node instanceof go.Node || node instanceof go.Link)) return;
      const data = node.data;

      if (node instanceof go.Node) {
        bus.$emit("selectEle", {
          type: "node",
          data: data.key,
        });
      } else {
        bus.$emit("selectEle", {
          type: "link",
          data: data,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#myDiagramDivParent {
  height: 100%;
  width: 100%;
}
</style>
